<!-- RuleExplanation.vue -->
<template>
  <div :class="['rule-item', 'rule-level-' + level]">
    <div class="rule-content">{{ rule.content }}</div>
    <div v-if="rule.children && rule.children.length" class="rule-children">
      <rule-explanation v-for="(childRule, index) in rule.children" :key="index" :rule="childRule" :level="level + 1" />
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    rule: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      default: 1,
    },
  })
</script>

<style scoped lang="less">
  .rule-children {
    margin-left: 24px;
  }
</style>
